import React from "react";

function Function(props) {
  return (
    <>
      <button onClick={props.multiply_2}>×2</button>
      <div>第一个函数组件{props.timer}</div>
    </>
  );
}

class FunctionTimer extends React.PureComponent {
  // 计时器
  state = {
    timer: 0,
  };

  timer;

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ timer: this.state.timer + 11 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  multiply_2 = () => {
    this.setState({ timer: this.state.timer * 2 });
  };

  // 计时器
  render() {
    const { timer } = this.state;
    return <Function timer={timer} multiply={() => this.multiply_2} />;
  }
}

export default FunctionTimer;
